<template>
  <div class="home">
    <el-radio v-model="radio" label="1">备选项</el-radio>
    <el-radio v-model="radio" label="2">备选项</el-radio>

    <h2>Echarts</h2>
    <div id="lineEcharts" style="width: 500px; height: 300px;"></div>
    <h2>mixins表格</h2>
    <zx-table ref="tableRef"></zx-table>
    <h2>表格编辑</h2>
    <zx-edit-table :tableData="tableData"></zx-edit-table>
    <h2>echarts 地图</h2>
    <echarts-map></echarts-map>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/demo/HelloWorld.vue'
import { getvideosync } from '@/api/api.js'
import ZxTable from "@/components/demo/ZxTable";
import ZxEditTable from "@/components/demo/ZxEditTable";
import EchartsMap from "@/components/demo/echartsMap";

export default {
  name: 'HomeView',
  components: {
    EchartsMap,
    ZxEditTable,
    ZxTable,
    HelloWorld
  },
  data(){
    return {
      radio: '1',
      option: {
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: 'line',
            smooth: true
          }
        ]
      },
      tableRef: null,
      tableData:{
        sel: null,//选中行
        row:{"user": "", "pwd": "", "degree": "", "select_degree": "", "info": "", "isSet": true, "role": "",select_role: "" }, //新增行数据
        tHead: [
          { id: "user", name: "登录用户",show:true, type:'input',placeholder: "登录用户", },
          { id: "pwd", name: "登录密码",show:true, type:'input',placeholder: "登录密码", },
          { id: "degree", name: "学历",show:true, type:'select',placeholder: "学历",
            options:[{label:'本科',value:'1'},{label:'大专',value:'2'},{label:'高中',value:'3'},]
          },
          { id: "select_degree", name: "学历",show:false, type:'select',placeholder: "学历",},
          { id: "info", name: "其他信息",show:true,type:'input',placeholder: "其他信息", },
          { id: "role", name: "角色",show:true,type:'select',placeholder: "角色",
            options:[{label:'职员',value:'1'},{label:'经理',value:'2'}]
          },
          { id: "select_role", name: "角色",show:false,type:'select',placeholder: "角色",},
        ],
        tBody: [
          {user:'登录用户0',pwd:'登录密码0',degree:'本科',select_degree:'1',info:'其他信息0', isSet:false,role:'经理',select_role:'2'},
          {user:'登录用户1',pwd:'登录密码1',degree:'大专',select_degree:'2',info:'其他信息1',isSet:false,role:'经理',select_role:'2'},
          {user:'登录用户2',pwd:'登录密码2',degree:'本科',select_degree:'1',info:'其他信息2',isSet:false,role:'经理',select_role:'2'},
        ],
        addShow:true,
      }

    }
  },
  created() {
    // console.log(process.env)

    /*getvideosync().then(res => {
      console.log(res);
    })*/

  },
  mounted() {

    this.viewLine();
  },
  methods: {
    viewLine(){

      let myChart = this.$echarts.init(document.getElementById("lineEcharts"));
      myChart.setOption(this.option);

    }
  }
}
</script>
